<!--
    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<!--
    Copyright (c) 2018, Joyent, Inc.
-->

<div class="page-header">
  <div class="resource-status">
    {{#if active}}
    <span class="active">active</span>
    {{else}}
    <span class="inactive">inactive</span>
    {{/if}}
    {{#if unactivated}}
    <span class="unactivated">unactivated</span>
    {{/if}}
  </div>
  <h1>
    <span class="name">{{name}}</span> <span class="version">{{version}}</span>
  </h1>
</div>

{{#role "operators"}}
<div class="actions">
  <div class="notes-component-container"></div>


  {{#if enableable}}
  <a class="btn btn-info enable"><i class="fa fa-ok-sign"></i> Enable Image</a>
  {{/if}}

  {{#if unactivated}}
  <a class="btn activate btn-primary"><i class="fa fa-ok-sign"></i> Activate Image</a>
  {{/if}}

  {{#if disableable}}
  <a class="btn disable btn-danger"><i class="fa fa-times"></i> Disable Image</a>
  {{/if}}
</div>
{{/role}}


<div class="row">
  <div class="basic col-md-3">
    {{#if os}}
    <div class="os-image">
      <img src="/img/os-{{os}}.png">
    </div>
    {{/if}}

    <p class="description">{{description}}</p>
  </div>


  <div class="details col-md-9">
    <section>
    <h3>Overview</h3>
    <ul class="list-unstyled attributes">

      <li>
        <strong>UUID</strong>
        <span class="value uuid">{{uuid}}</span>
      </li>

      {{#if origin}}
      <li>
        <strong>Image Origin</strong>
        <span class="value">
          <a class="origin" href="/images/{{origin}}"><span class="origin-name-version"></span></a>
        </span>
      </li>
      {{/if}}

      <li>
        <strong>Owner</strong>
        <span class="value uuid">{{owner}}</span>
      </li>

      <li>
        <strong>Publish Date</strong>
        <span class="value">{{published_at}}</span>
      </li>

      <li>
        <strong>Operating System</strong>
        <span class="value">{{os}}</span>
      </li>

      <li>
        <strong>Image Type</strong>
        <span class="value">{{type}}</span>
      </li>

      {{#if cpu_type}}
      <li>
        <strong>CPU Type</strong>
        <span class="value">{{cpu_type}}</span>
      </li>
      {{/if}}
    </ul>
    </section>

    <section>
      <h3>
        Access Control
        <small>The following users have access to this image</small>

        {{#role "operators"}}
            {{#if public}}
                <button class="btn btn-default btn-sm change-publicity pull-right">
                    <i class="fa fa-lock"></i> Make Image Private
                </button>
            {{else}}
                <button class="btn btn-success btn-sm change-publicity pull-right">
                    <i class="fa fa-unlock"></i> Make Image Public
                </button>
                <button class="btn btn-success btn-sm pull-right add-image-acl">
                    <i class="fa fa-plus"></i>
                </button>
            {{/if}}
        {{/role}}
    </h3>
      <div class="acl-container"></div>
    </section>

    <section>
        <h3>Traits
            {{#role "operators"}}
            <div class="actions">
              <button type="button" class="btn btn-info btn-sm manage-traits"><i class="fa fa-pencil"></i> Modify Traits</button>
            </div>
            {{/role}}
        </h3>
        {{#if traits}}
            <div class="traits">
                {{traits}}
            </div>
        {{else}}
            <div class="zero-state">No traits defined for this image.</div>
        {{/if}}
    </section>

    <section>
    <h3>Files
      {{#role "operators"}}
      {{#if unactivated}}<a class="show-upload-form btn">Upload a new file</a>{{/if}}
      {{/role}}
    </h3>

    <ul class="list-unstyled files">
      {{#if files.length}}
      <li class="file">
        {{#each files}}
        <div class="sha1"><span>{{this.sha1}}</span></div>
        <div class="size"><span>{{this.size}} bytes</span></div>
        <div class="compression"><span>{{this.compression}}</span></div>
        {{/each}}
      </li>
      {{/if}}
      <li class="progress">
        <div class="progress progress-striped active">
          <div class="bar" style="width: 0%;"></div>
        </div>
      </li>

      {{#unless files.length}}
      <li class="zero-state">
        There are currently no files in this Image. An image must have a file before it can be activated.
      </li>
      {{/unless}}


      <li class="upload">
        <div class="select">
          <a class="add-file btn">Select image file to upload</a>
        </div>
        <div class="compression">
          Compression <select class="input-small">
            <option value="none">none</option>
            <option value="bzip2">bzip2</option>
            <option value="gzip">gzip</option>
          </select>
        </div>

        <div class="upload-actions">
          <button class="btn btn-small cancel-upload-form">Cancel</button>
          <button class="btn btn-small btn-primary start-upload">Start Image Upload</button>
        </div>
      </li>
    </ul>

    <form class="uploadform" style="display: none">
      <input type="file" class="fileinput">
    </form>
    </section>


    <section>
    <h3>Requirements</h3>
    <ul class="list-unstyled attributes requirements">
      <li>
        <strong>Networks</strong>
        <span class="value">
          {{#each requirements.networks}}
          {{this.name}} / {{this.description}}
          {{/each}}
        </span>
      </li>

      {{#if requirements.ssh_key}}
      <li>
        <strong>SSH Key</strong>
        <span class="value">{{requirements.ssh_key}}</span>
      </li>
      {{/if}}

      {{#if requirements.min_ram}}
      <li>
        <strong>Minimum RAM</strong>
        <span class="value">{{requirements.min_ram}}</span>
      </li>
      {{/if}}

      {{#if requirements.max_ram}}
      <li>
        <strong>Maximum RAM</strong>
        <span class="value">{{requirements.max_ram}}</span>
      </li>
      {{/if}}

      {{#if requirements.generate_passwords}}
      <li>
        <strong>Paaswords Generated for users:</strong>
        <span class="value">
          {{#each requirements.users}} {{this}} {{/each}}
        </span>
      </li>
      {{/if}}

      {{#if requirements.bootrom}}
      <li>
        <strong>BootROM</strong>
        <span class="value">{{requirements.bootrom}}</span>
      </li>
      {{/if}}

      {{#if requirements.brand}}
      <li>
        <strong>Brand</strong>
        <span class="value">{{requirements.brand}}</span>
      </li>
      {{/if}}
    </ul>
    </section>



    <section>
        <div class="row">
            <div class="col-sm-6">
                <h3>Tags</h3>
                <div class="tags-container"></div>
            </div>
            <div class="col-sm-6">
                <h3>Billing Tags</h3>
                <div class="billing-tags-container">
                    <div class="billing-tags"></div>
                </div>
            </div>
        </div>
    </section>




    {{#if nic_driver}}
    <section>
    <h3>Drivers</h3>
    <ul class="list-unstyled attributes requirements">
      <li>
        <strong>NIC Driver</strong>
        <span class="value">{{nic_driver}}</span>
      </li>
      <li>
        <strong>Disk Driver</strong>
        <span class="value">{{disk_driver}}</span>
      </li>
    </ul>
    </section>
    {{/if}}
  </div>

</div> {{! row}}
